<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <cmp></cmp>
  </div>

  <script>
    // 局部组件，定义时为一个对象，在需要的父组件中注册，才能被使用
    // 子组件
    const cmp = {
      // data不能写对象方式，一定要写成函数，函数返回一个对象
      data() {
        return {
          title: '局部组件'
        }
      },
      // 组件中的元素,定义时必须要有一个顶层,顶层元素必须是一个真实的dom元素
      template: `
        <div>
          <div @click="click">111</div>
          <div>222</div>
        </div>
      `,
      methods:{
        click(){
          console.log('click')
        }
      },
      created(){
        console.log('cmp --- created')
      },
      beforeMount(){
        console.log('cmp --- beforeMount')
      },
      mounted(){
        console.log('cmp --- mounted')
      }
    }

    // 根组件
    new Vue({
      components: {
        // key就是在父元素中调用的标签名称，value组件对象
        // cmp: cmp
        cmp
      },
      created(){
        console.log('vue --- created')
      },
      beforeMount(){
        console.log('vue --- beforeMount')
      },
      mounted(){
        console.log('vue --- mounted')
      }
    }).$mount('#app')
  </script>
</body>

</html>